<template>
  <div>
    <!-- 头部 -->
    <div class="dark-top">
      <a @click="goback" class="page-back"><div></div></a>
      <div class="page-title">
        <font style="vertical-align: inherit;">发布到广场</font>
      </div>
    </div>
    <!-- 内容 -->
    <div class="dark-body">
      <!-- 选择班级 -->
      <div class="release-class">
        <ul>
          <li>
            <div class="select-por">
              <div class="selectBox">
                <div class="selectBox_show" v-on:click.stop="arrowDown">
                  <i class="icon icon_arrowDown"></i>
                  <p title="请选择" class="selectBox-p">{{ unitName }}</p>
                  <input type="hidden" name="unit" v-model="unitModel" />
                </div>
                <div
                  class="selectBox_list"
                  v-show="isShowSelect"
                  style="max-height: 240px; display: block;"
                >
                  <div
                    class="selectBox_listLi"
                    v-for="(item, index) in dataList"
                    @click.stop="select(item, index)"
                    :key="item.id"
                  >
                    {{ item.name }}
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <!-- 标题 -->
      <div class="release-title">
        <input
          type="text"
          ref="title"
          class="title-input"
          placeholder="分享标题"
        />
      </div>

      <!-- 文本框 -->
      <div class="text-dark">
        <textarea
          class="rele-text"
          ref="content"
          placeholder="分享开心事~"
          rows="9"
        ></textarea>
        <!-- 上传图片 -->
        <div class="rele-button">
          <div
            class="rele-img1"
            v-for="(item, index) in uploadfile"
            :key="item.url"
          >
            <div
              class="rele-back"
              :style="{ backgroundImage: 'url(' + item.url + ')' }"
            ></div>
            <div class="rele-del" @click="ossDeleteImg(item.name, index)"></div>
          </div>
          <div class="rele-img2">
            <div>
              <input type="file" id="uploadImage" @change="toUploads" />
            </div>
          </div>
        </div>
      </div>

      <!-- 发布按钮 -->
      <div class="release-button" @click="addRelease">发布</div>
    </div>
  </div>
</template>

<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script>
<script>
//引入oss
const OSS = require("ali-oss");
import { Indicator } from "mint-ui";
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      isShowSelect: false,
      dataList: [{ id: -1, name: "请选择" }],
      unitName: "选择班级",
      unitModel: "",
      uploadfile: [],
      signaturen: []
    };
  },
  created() {
    this.ossSignaturen();
    this.teachClass();
  },
  methods: {
    goback() {
      this.$router.go(-1);
    },
    arrowDown() {
      this.isShowSelect = !this.isShowSelect;
    },
    select(item, index) {
      this.isShowSelect = false;
      console.log(item);
      this.unitModel = item.id;
      this.unitName = item.name;
    },
    toUploads() {
      let me = this;
      const urls = [];
      //oss 基本配置
      var client = new OSS({
        region: this.signaturen.region,
        endpoint: this.signaturen.region,
        accessKeyId: this.signaturen.accessKeyId,
        accessKeySecret: this.signaturen.accessKeySecret,
        bucket: this.signaturen.bucket
      });
      //获取文件信息
      const files = document.getElementById("uploadImage");
      if (files) {
        const fileLen = document.getElementById("uploadImage").files;
        const file = document.getElementById("uploadImage").files[0];
        let consat = file.name;
        let name =
          this.signaturen.dir + this.random_string(12) + fileLen[0].name; //上传的文件地址
        for (let i = 0; i < fileLen.length; i++) {
          const file = fileLen[i];
          client
            .put(name, file)
            .then(res => {
              console.log(res);

              me.uploadfile.push({
                url: res.res.requestUrls[0],
                fileUrl: res.res.requestUrls[0],
                name: res.name
              });
              Toast("上传成功");
            })
            .catch(err => {
              console.log(err);
            });
        }
      }

      this.$emit("getUploadData", this.uploadfile);
    },
    //生成随机名字
    random_string(len) {
      len = len || 32;
      var chars = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678";
      var maxPos = chars.length;
      var pwd = "";
      for (let i = 0; i < len; i++) {
        pwd += chars.charAt(Math.floor(Math.random() * maxPos));
      }
      return pwd;
    },
    ossSignaturen() {
      //oss签名验证
      let me = this;
      this.$axios
        .post("/api/index/oss_ali", {
          emulateJSON: true
        })
        .then(kun => {
          console.log(kun);
          me.signaturen = kun.data;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    ossDeleteImg(val, index) {
      //oss删除图片
      Indicator.open({ spinnerType: "fading-circle" });
      let me = this;
      this.$axios
        .post("/api/index/deletePic", { img: val }, { emulateJSON: true })
        .then(kun => {
          console.log(kun);
          Indicator.close();
          if (kun.code == 200) {
            me.uploadfile.splice(index, 1);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    teachClass() {
      //获取管理学员的班级
      let me = this;
      this.$axios
        .post(
          "/api/square/squareTeachClass",
          { uid: localStorage.uid },
          { emulateJSON: true }
        )
        .then(kun => {
          console.log(kun);
          if (kun.code == 200) {
            me.dataList = kun.data;
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    addRelease() {
      //发帖添加数据
      if (this.unitModel == "") {
        Toast("无管理班级不可发帖");
        return false;
      }
      Indicator.open({ spinnerType: "fading-circle" });
      let me = this;
      this.$axios
        .post(
          "/api/square/squareInsert",
          {
            uid: localStorage.uid,
            bj_id: this.unitModel,
            class: this.unitName,
            title: this.$refs.title.value,
            graphic: this.$refs.content.value,
            picture: this.uploadfile
          },
          { emulateJSON: true }
        )
        .then(kun => {
          console.log(kun);
          Indicator.close();
          if (kun.code == 200) {
            Toast("发布成功，等待审核");
          } else {
            Toast(kun.msg);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  }
};
</script>

<style lang="scss" scoped>
ul li {
  list-style: none;
}
ul,
p {
  margin: 0;
  padding: 0;
}
//头部
.dark-top {
  width: 100%;
  height: 2.75rem;
  color: #1a1a1a;
  position: relative;

  /* 设置渐变 */
  background: rgb(255, 0, 0); /* Old browsers */
  background: -moz-linear-gradient(
    to right bottom,
    rgb(255, 127, 95) 10%,
    rgb(229, 39, 77) 70%
  ); /* FF3.6-15 */
  background: -webkit-linear-gradient(
    to right bottom,
    rgb(255, 127, 95) 10%,
    rgb(229, 39, 77) 70%
  ); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(
    to right bottom,
    rgb(255, 127, 95) 10%,
    rgb(229, 39, 77) 70%
  ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */

  .page-back {
    width: 0.5625rem;
    height: 0.9375rem;
    text-decoration: none;
    color: #ffffff;
    display: inline-block;
    position: absolute;
    left: 0.9375rem;
    top: 1.0625rem;

    :first-child {
      width: 100%;
      height: 100%;
      background-image: url(../../assets/login/return-white.png);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      overflow: hidden;
    }
  }

  .page-title {
    font-size: 1.125rem;
    color: #ffffff;
    display: inline-block;
    position: absolute;
    left: 50%;
    top: 0.65rem;
    -ms-transform: translateX(-50%) translateY(0); /* IE 9 */
    -moz-transform: translateX(-50%) translateY(0); /* Firefox */
    -webkit-transform: translateX(-50%) translateY(0); /* Safari 和 Chrome */
    -o-transform: translateX(-50%) translateY(0); /* Opera */
  }
}
//内容
.dark-body {
  //选择班级
  .release-class {
    width: 21.5625rem;
    height: 3.125rem;

    margin: 1.0625rem auto 0;
    font-size: 1rem;
    color: #7f7f7f;
    box-shadow: 0 0 0 0.0625rem rgba(0, 0, 0, 0.05);
    //下拉框
    .select-por {
      text-align: center;

      .selectBox-p {
        height: 3.125rem;
        line-height: 3.125rem;
      }
      .selectBox_list {
        position: relative;
        z-index: 999;
        background-color: white;

        .selectBox_listLi {
          margin-bottom: 0.625rem;
        }
      }
    }
  }
  //标题
  .release-title {
    width: 21.5625rem;
    height: 3.125rem;
    box-shadow: 0 0 0 0.0625rem rgba(0, 0, 0, 0.05);
    margin: 1.0625rem auto 0.9375rem;

    .title-input {
      font-size: 1rem;
      color: #808080;
      width: 99%;
      height: 96%;
      border: none;
      outline: none;
    }
  }
  // 内容
  .text-dark {
    width: 100%;
    height: 18.75rem;
    position: relative;

    .rele-text {
      width: 90%;
      padding: 1.25rem 0.9375rem 0;
      font-size: 1rem;
      color: #808080;
      border: #ffffff;
    }
    .rele-button {
      height: 5.25rem;
      position: absolute;
      bottom: 0.9375rem;
      left: 0.9375rem;

      .rele-img1 {
        width: 5.25rem;
        height: 5.25rem;
        float: left;
        position: relative;

        .rele-back {
          width: 5.25rem;
          height: 5.25rem;
          background-image: url(../../assets/login/release.png);
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center;
          overflow: hidden;
        }
        .rele-del {
          width: 0.875rem;
          height: 0.875rem;
          position: absolute;
          top: 0.3125rem;
          right: 0.3125rem;

          background-image: url(../../assets/login/rele-del.png);
          background-repeat: no-repeat;
          background-size: contain;
          background-position: center;
          overflow: hidden;
        }
      }
      // 上传图片
      .rele-img2 {
        width: 5.25rem;
        height: 5.25rem;
        float: left;
        margin-left: 0.1875rem;

        :first-child {
          width: 100%;
          height: 100%;
          background-image: url(../../assets/login/rele-img.png);
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center;
          overflow: hidden;

          input {
            //将input设为透明
            opacity: 0;
          }
        }
      }
    }
  }
  //发布按钮
  .release-button {
    margin: 3.125rem auto 0;
    width: 21.5625rem;
    height: 3.0625rem;
    border-radius: 1.5625rem;
    font-size: 1.125rem;
    color: #ffffff;
    text-align: center;
    line-height: 3.0625rem;

    /* 设置渐变 */
    background: rgb(255, 0, 0); /* Old browsers */
    background: -moz-linear-gradient(
      to right bottom,
      rgb(255, 127, 95) 10%,
      rgb(229, 39, 77) 70%
    ); /* FF3.6-15 */
    background: -webkit-linear-gradient(
      to right bottom,
      rgb(255, 127, 95) 10%,
      rgb(229, 39, 77) 70%
    ); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(
      to right bottom,
      rgb(255, 127, 95) 30%,
      rgb(229, 39, 77) 80%
    ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
  }
}
</style>
